<template>
  <div class="app-container">
    <div class="tree-main">
      <el-tree
        class="tree"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span slot-scope="{ node }" class="custom-tree-node">
          <span>
            <svg-icon style="font-size: 18px" :icon-class="node.childNodes.length > 0 ? 'wenjianjia' : 'a-shebei'">
            </svg-icon>
            {{ node.label }}
          </span>
        </span>
      </el-tree>

      <div class="main">
        <el-form class="searchForm" :inline="true" :model="queryForm" label-width="90px">
          <el-form-item label="部门名称">
            <el-input v-model="queryForm.orgname"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="pageChange(1)">查询</el-button>
            <el-button type="warning  " @click="onOAuthUpdateDept">部门同步</el-button>
            <!-- <el-button type="info" @click="onAdd">添加</el-button> -->
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          height="550"
          stripe
          border
          style="width: 100%"
        >
          <!-- <el-table-column :resizable="false" label="操作" width="80" fixed>
            <template slot-scope="scope">
              <span class="edit-tooltip">
                <el-tooltip effect="dark" content="删除" placement="bottom">
                  <el-button type="text" @click="onDel(scope.row)">
                    <svg-icon style="fill: #f46c6c" icon-class="butongyi"></svg-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="修改" placement="bottom">
                  <el-button type="text" @click="onClickName(scope.row)">
                    <svg-icon style="fill: #f46c6c" icon-class="a-xiugai"></svg-icon>
                  </el-button>
                </el-tooltip>
              </span>
            </template>
          </el-table-column> -->
          <el-table-column prop="orgcode" label="部门编号" min-width="120" />
          <el-table-column prop="orgname" label="部门名称" min-width="100" />
          <el-table-column prop="curr" label="币别" min-width="120" />
          <el-table-column prop="showname" label="展示部门" min-width="120" />
          <el-table-column label="是否启用" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.orgstatus == '1' ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="orderno" label="排序" min-width="120" />
        </el-table>
      </div>
    </div>
    <el-pagination
      style="margin: 10px"
      :current-page="queryForm.pagenum"
      :page-sizes="[20, 50, 100]"
      :page-size="queryForm.pagesize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />

    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="1200px"
      @close="onClose"
    >
      <span>
        <el-form ref="form" :model="form" :rules="formRules" label-width="110px" :inline="false">
          <h2 style="color: red">展示部门的编号要小于等于3位；不是展示部门的，编号长度要大于3位</h2>
          <el-row :gutter="10">
            <el-col :span="8" :offset="0">
              <el-form-item label="部门编号" prop="orgcode">
                <el-input v-model="form.orgcode" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="部门名称" prop="orgname">
                <el-input v-model="form.orgname" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="上级部门" prop="parentid">
                <el-input v-model="form.parentid" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8" :offset="0">
              <el-form-item label="展示部门" prop="showname">
                <el-select v-model="form.showname" placeholder="请选择展示部门">
                  <el-option
                    v-for="item in datas"
                    :key="item.id"
                    :label="item.orgname"
                    :value="item.orgname"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="是否启用" prop="orgstatus">
                <el-select v-model="form.orgstatus" placeholder="请选择是否启用">
                  <el-option label="是" :value="1">是</el-option>
                  <el-option label="否" :value="0">否</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="序号" prop="orderno">
                <el-input v-model="form.orderno" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8" :offset="0">
              <el-form-item label="币别" prop="curr">
                <el-input v-model="form.curr" disabled>
                  <el-button slot="append" type="info" icon="el-icon-zoom-in" @click="Clickcurr"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="所属国家" prop="nation">
                <el-input v-model="form.nation" disabled>
                  <el-button slot="append" type="info" icon="el-icon-zoom-in" @click="Clicknation"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </span>
      <div slot="footer">
        <el-button type="info" @click="onSubmit">保存</el-button>
      </div>
    </el-dialog>
    <bmbibie :currvisible="currvisible" @father="currvisible = false" @onChoose="onChoose"></bmbibie>
    <bmguojia :nationvisible="nationvisible" @fatherguojia="nationvisible = false" @onChoosegj="onChoosegj"></bmguojia>
  </div>
</template>

<script>
import { QueryPageListAll, QueryPageList, Save, Del } from '@/api/settings/bumen'
import { OAuthUpdateDept } from '@/api/index.js'
import bmbibie from './bumendialog/bmbibie'
import bmguojia from './bumendialog/bmguojia.vue'

export default {
  name: 'Bumen',
  components: { bmbibie, bmguojia },
  data() {
    return {
      queryForm: {
        pagenum: 1,
        pagesize: 20
      },
      total: 0,
      tableData: [],
      loading: true,
      visible: false,
      title: '部门管理',
      formRules: {
        orgcode: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
        orgname: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
      },
      form: {
        parentid: '0'
      },
      // tree 数据
      data: [],
      defaultProps: {
        children: 'children',
        label: 'orgname'
      },
      // 添加需要的上级id
      parentid: '0',
      datas: [],
      // 币别子组件弹框显示与隐藏
      currvisible: false,
      // 国家组件弹框显示与隐藏
      nationvisible: false
    }
  },
  created() {
    this.onSearchAll()
    this.onSearch()
  },
  methods: {
    // 点击币别弹框
    Clickcurr() {
      this.currvisible = true
    },
    // 点击国家弹框
    Clicknation() {
      this.nationvisible = true
    },
    // 获取子组件穿回来的值
    onChoose(row) {
      console.log(row)
      this.form.curr = row.curr
    },
    onChoosegj(row) {
      this.form.nation = row.nation
    },
    // 点击页面显示条数
    sizeChange(size) {
      this.queryForm.pagesize = size
      this.onSearch()
    },
    // 点击下一页与页码
    pageChange(page) {
      console.log(page)
      this.queryForm.pagenum = page
      this.onSearch()
    },
    // 树状结构数据转换
    turnData(arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.parentid == pid) {
          const children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    },
    // 获取所有数据
    async onSearchAll() {
      const { content } = await QueryPageListAll({})
      console.log('获取所有数据', content)
      var res = []
      content.forEach(item => {
        if (item.orgname != null) {
          res.push(item)
        }
      })
      this.datas = res
      const result = this.turnData(content, '0')
      this.data = result
    },
    // 树状结构点击时调用数据
    async handleNodeClick(data, index, event) {
      this.loading = true
      this.queryForm.parentid = data.id
      this.form.parentid = data.id
      this.queryForm.pagenum = 1
      this.queryForm.pagesize = 20
      const res = await QueryPageList(this.queryForm)
      console.log(res)
      this.tableData = res.content.list
      this.total = res.content.total
      this.loading = false
    },
    async onOAuthUpdateDept() {
      this.loading = true
      try {
        const result = await OAuthUpdateDept({ userid: this.$store.getters.userInfo.id })
        if (!result.success) throw new Error(res.message)
        this.onSearchAll()
        this.onSearch()
      } catch (error) {
        console.log(error)
        Message({ message: error, type: 'warning' })
      } finally {
        this.loading = false
      }
    },
    // 根据查询条件查询
    async onSearch() {
      this.loading = true
      const list = await QueryPageList(this.queryForm)
      console.log('根据查询条件查询', list)
      this.tableData = list.content.list
      this.total = list.content.total
      this.loading = false
    },

    onClickName(data) {
      this.visible = true
      this.form = data
    },

    onAdd() {
      console.log(new Date())
      var time = new Date()
      this.form.time = time
      this.form.zuzhi = this.queryForm.zuzhi
      if (this.form.parentid == null) {
        this.form.parentid = '0'
      }
      this.visible = true
    },
    onClose() {
      this.form = {}
    },
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const { success, message } = await Save(this.form)
          if (success == true) {
            if (this.form.id) {
              this.$message({
                type: 'success',
                message: '修改数据成功'
              })
            } else {
              this.$message({
                type: 'success',
                message: '添加数据成功'
              })
            }
          } else {
            this.$message({
              type: 'error',
              message: message
            })
          }

          this.visible = false
          this.onSearch()
          this.onSearchAll()
        } else {
          return false
        }
      })
    },
    onDel(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const del = await Del({ id: data.id })
          console.log(del)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.onSearch()
          this.onSearchAll()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 5px;
  padding: 0 10px;
  display: inline-block;
  letter-spacing: 0.5px;
}
.tree-main {
  display: flex;
  height: 100%;
  .tree {
    width: 250px;
    height: calc(100vh - 180px);
    overflow-y: auto;
  }
  .main {
    width: calc(100% - 250px);
  }
}
.el-select {
  width: 270px;
}
</style>
